<template>
  <div id='app'>
    <div v-if="pageIndex ===1" key="1">
      <el-row style="text-align: left">
        <el-col :span="24">
          <el-button size="medium"
                     type="success"
                     @click="myInsertPre()">新增工作
          </el-button>
        </el-col>
      </el-row>
      <div style="text-align: left;margin-top: 20px;">
        <span>工作标签:   </span>
        <el-tag style="left: 20px"
                v-for="tag in tags"
                @click.native="myLabel(tag.name)"
                :key="tag.name"
                :type="tag.type">
          {{ tag.name }}
        </el-tag>
      </div>
      <div style="margin-top: 20px;">
        <el-table v-loading="listLoading"
                  :data="result.list"
                  border
                  :header-cell-style="headClass"
                  :cell-style="rowClass"
                  style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="工作ID:">
                  <span>{{ props.row.jobId }}</span>
                </el-form-item>
                <el-form-item label="工作名称:">
                  <span>{{ props.row.jobName }}</span>
                </el-form-item>
                <el-form-item label="工作类型:">
                  <span>{{ props.row.jobTypeName }}</span>
                </el-form-item>
                <el-form-item label="企业名称:">
                  <span>{{ props.row.companyName }}</span>
                </el-form-item>
                <el-form-item label="工资待遇:">
                  <span>{{ props.row.salary }}</span>
                </el-form-item>
                <el-form-item label="学历要求:">
                  <span v-if="props.row.degree===0">初中</span>
                  <span v-if="props.row.degree===1">高中</span>
                  <span v-if="props.row.degree===2">本科</span>
                  <span v-if="props.row.degree===3">研究生</span>
                  <span v-if="props.row.degree===4">博士</span>
                </el-form-item>
                <el-form-item label="工作标签:">
                  <span>{{ props.row.label }}</span>
                </el-form-item>
                <el-form-item label="工作城市:">
                  <span>{{ props.row.city }}</span>
                </el-form-item>
                <el-form-item label="招募人数:">
                  <span>{{ props.row.recruitNumber }}</span>
                </el-form-item>
                <el-form-item label="浏览数量:">
                  <span>{{ props.row.viewNum }}</span>
                </el-form-item>
                <el-form-item label="详细地址:">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="工作介绍:">
                  <span>{{ props.row.message }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
              prop="jobName"
              label="工作名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="salary"
              label="工资待遇"
              width="180">
          </el-table-column>
          <el-table-column
              prop="degree"
              label="学历要求"
              width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.degree===0">
                <span>初中</span>
              </div>
              <div v-if="scope.row.degree===1">
                <span>高中</span>
              </div>
              <div v-if="scope.row.degree===2">
                <span>本科</span>
              </div>
              <div v-if="scope.row.degree===3">
                <span>研究生</span>
              </div>
              <div v-if="scope.row.degree===4">
                <span>博士</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="jobTypeName"
              label="工作类型"
              width="180">
          </el-table-column>
          <el-table-column
              prop="label"
              label="工作标签"
              width="180">
          </el-table-column>
          <el-table-column
              prop="city"
              label="工作地点"
              width="180">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope='scope'>
              <el-button type="primary" size="mini" @click="myUpdatePre(scope.row.jobId)">修改</el-button>
              <el-button type="success" size="mini" @click="myCopyPre(scope.row.jobId)">复制</el-button>
              <el-button type="danger" size="mini" @click="myDel(scope.row.jobId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 底栏容器 -->
        <el-footer style="text-align: left;">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryParam.pageNum"
              :page-sizes="[10,20,30,40,50,100,200,500,1000]"
              :page-size="queryParam.pageSize"
              :layout="queryParam.isCount ? 'total, sizes, prev, pager, next, jumper' : 'sizes, prev, next'"
              :total="result.totalNum">
          </el-pagination>
        </el-footer>
      </div>
    </div>
    <div v-if="pageIndex ===2" key="2" style="width: 400px">
      <el-form ref="form" :model="params" label-width="80px" v-loading="listLoading" class="el-form-css">
        <el-form-item label="工作名称:">
          <el-input v-model="params.jobName" placeholder="请输入工作名称"></el-input>
        </el-form-item>
        <el-form-item label="薪资待遇:">
          <el-input v-model.number="params.salary"
                    placeholder="请输入薪资待遇"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"></el-input>
        </el-form-item>
        <el-form-item label="学历要求:">
          <el-select v-model="params.degree" placeholder="请选择最高学历">
            <el-option label="小学" :value=0></el-option>
            <el-option label="高中" :value=1></el-option>
            <el-option label="本科" :value=2></el-option>
            <el-option label="研究生" :value=3></el-option>
            <el-option label="博士" :value=4></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作类型:">
          <el-select v-model="params.jobTypeId" placeholder="请选择最高学历">
            <el-option
                v-for="item in jobTypes"
                :key="item.jobTypeId"
                :label="item.jobTypeName"
                :value="item.jobTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作标签:">
          <el-autocomplete style="width: 300px;"
                           v-model="params.label"
                           popper-class="my-autocomplete"
                           :fetch-suggestions="querySearchAsync"
                           placeholder="请选择标签或输入新标签">
            <template slot-scope="{ item }">
              <span>{{ item.value }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="工作城市:">
          <el-select v-model="params.city" placeholder="请选择工作城市">
            <el-option label="广州" value="广州"></el-option>
            <el-option label="珠海" value="珠海"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
            <el-option label="中山" value="中山"></el-option>
            <el-option label="肇庆" value="肇庆"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input type="textarea" maxlength="250" show-word-limit :autosize="{ minRows: 3}"
                    v-model="params.address"
                    style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="介绍:">
          <el-input type="textarea" maxlength="250" show-word-limit :autosize="{ minRows: 3}"
                    v-model="params.message"
                    style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changePageIndex(1)">返回</el-button>
          <el-button type="success" @click="myInsert()">立即添加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="pageIndex ===3" key="3" style="width: 400px">
      <el-form ref="form" :model="params" label-width="80px" v-loading="listLoading" class="el-form-css">
        <el-form-item label="工作名称:">
          <el-input v-model="params.jobName" placeholder="请输入工作名称"></el-input>
        </el-form-item>
        <el-form-item label="薪资待遇:">
          <el-input v-model.number="params.salary"
                    placeholder="请输入薪资待遇"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"></el-input>
        </el-form-item>
        <el-form-item label="学历要求:">
          <el-select v-model="params.degree" placeholder="请选择最高学历">
            <el-option label="小学" :value=0></el-option>
            <el-option label="高中" :value=1></el-option>
            <el-option label="本科" :value=2></el-option>
            <el-option label="研究生" :value=3></el-option>
            <el-option label="博士" :value=4></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作类型:">
          <el-select v-model="params.jobTypeId" placeholder="请选择最高学历">
            <el-option
                v-for="item in jobTypes"
                :key="item.jobTypeId"
                :label="item.jobTypeName"
                :value="item.jobTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作标签:">
          <el-autocomplete style="width: 300px;"
                           v-model="params.label"
                           popper-class="my-autocomplete"
                           :fetch-suggestions="querySearchAsync"
                           placeholder="请选择标签或输入新标签">
            <template slot-scope="{ item }">
              <span>{{ item.value }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="工作城市:">
          <el-select v-model="params.city" placeholder="请选择工作城市">
            <el-option label="广州" value="广州"></el-option>
            <el-option label="珠海" value="珠海"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
            <el-option label="中山" value="中山"></el-option>
            <el-option label="肇庆" value="肇庆"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input type="textarea" maxlength="250" show-word-limit :autosize="{ minRows: 3}"
                    v-model="params.address"
                    style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="介绍:">
          <el-input type="textarea" maxlength="250" show-word-limit :autosize="{ minRows: 3}"
                    v-model="params.message"
                    style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changePageIndex(1)">返回</el-button>
          <el-button type="success" @click="myUpdate()">立即修改</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="pageIndex ===4" key="4" style="width: 400px">
      <el-form ref="form" :model="params" label-width="80px" v-loading="listLoading" class="el-form-css">
        <el-form-item label="工作名称:">
          <el-input v-model="params.jobName" placeholder="请输入工作名称"></el-input>
        </el-form-item>
        <el-form-item label="薪资待遇:">
          <el-input v-model.number="params.salary"
                    placeholder="请输入薪资待遇"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"></el-input>
        </el-form-item>
        <el-form-item label="学历要求:">
          <el-select v-model="params.degree" placeholder="请选择最高学历">
            <el-option label="小学" :value=0></el-option>
            <el-option label="高中" :value=1></el-option>
            <el-option label="本科" :value=2></el-option>
            <el-option label="研究生" :value=3></el-option>
            <el-option label="博士" :value=4></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作类型:">
          <el-select v-model="params.jobTypeId" placeholder="请选择最高学历">
            <el-option
                v-for="item in jobTypes"
                :key="item.jobTypeId"
                :label="item.jobTypeName"
                :value="item.jobTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作标签:">
          <el-autocomplete style="width: 300px;"
                           v-model="params.label"
                           popper-class="my-autocomplete"
                           :fetch-suggestions="querySearchAsync"
                           placeholder="请选择标签或输入新标签">
            <template slot-scope="{ item }">
              <span>{{ item.value }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="工作城市:">
          <el-select v-model="params.city" placeholder="请选择工作城市">
            <el-option label="广州" value="广州"></el-option>
            <el-option label="珠海" value="珠海"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
            <el-option label="中山" value="中山"></el-option>
            <el-option label="肇庆" value="肇庆"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input type="textarea" maxlength="250" show-word-limit :autosize="{ minRows: 3}"
                    v-model="params.address"
                    style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="介绍:">
          <el-input type="textarea" maxlength="250" show-word-limit :autosize="{ minRows: 3}"
                    v-model="params.message"
                    style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changePageIndex(1)">返回</el-button>
          <el-button type="success" @click="myInsert()">立即添加</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {deleteJob, getCompanyJobs, getCompanyJobsLabel, getJob, getJobTypes, postCreateJob, putUpdateJob} from "@/api";

export default {
  name: "comJobInformation",
  data() {
    return {
      listLoading: false,
      companyName: '',
      pageIndex: 1,
      timeout: '',
      queryParam: {
        pageSize: 10,
        pageNum: 1,
        isCount: true,
        companyId: '',
        label: '',
        orderBy: 1,
      },
      result: {
        list: [],
        totalNum: -1
      },
      tags: [],
      params: {
        jobName: '',
        salary: '',
        degree: '',
        message: '',
        jobTypeId: '',
        companyId: '',
        label: '',
        city: '',
        address: '',
      },
      jobTypes: [],
    }
  }, methods: {
    //组件方法
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val
      this.myList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageNum = val
      this.myList()
    },
    changePageIndex(pageIndex) {
      if (pageIndex === 1) {
        getCompanyJobsLabel(this.$route.query.id).then(res => {
          this.tags = []
          this.tags.push({name: '全部', type: ''})
          res.data.list.forEach(it => {
            if (it !== '') {
              this.tags.push({name: it, type: ''})
            }
          })
        })
        this.pageIndex = pageIndex;
      } else {
        this.pageIndex = pageIndex;
      }
    },
    querySearchAsync(queryString, cb) {
      let restaurants = this.tags;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    //执行方法
    myList() {
      this.listLoading = true
      getCompanyJobs(this.queryParam).then(res => {
        this.result.list = res.data.list
        this.result.totalNum = res.data.totalNum
        this.listLoading = false
      })
    },
    myInsertPre() {
      this.params = {}
      let companyId = this.$route.query.id
      this.$set(this.params, 'jobName', '')
      this.$set(this.params, 'salary', '')
      this.$set(this.params, 'degree', '')
      this.$set(this.params, 'message', '')
      this.$set(this.params, 'jobTypeId', '')
      this.$set(this.params, 'companyId', companyId)
      this.$set(this.params, 'label', '')
      this.$set(this.params, 'city', '')
      this.$set(this.params, 'address', '')
      getCompanyJobsLabel(this.$route.query.id).then(res => {
        this.tags = []
        res.data.list.forEach(it => {
          if (it !== '') {
            this.tags.push({'value': it})
          }
        })
      })
      this.changePageIndex(2)
    },
    myInsert() {
      if (this.params.jobName === '' || this.params.jobName === null || this.params.jobName === undefined) {
        this.$message.warning('请输入工作名称')
        throw "error -> 请输入账号"
      }
      if (this.params.salary === '' || this.params.salary === null || this.params.salary === undefined) {
        this.$message.warning('请输入薪资待遇')
        throw "error -> 请输入薪资待遇"
      }
      if (this.params.jobTypeId === '' || this.params.jobTypeId === null || this.params.jobTypeId === undefined) {
        this.$message.warning('请输入工作类型')
        throw "error -> 请输入工作类型"
      }
      if (this.params.label === '全部') {
        this.$message.warning('工作标签不能为全部')
        throw "error -> 工作标签不能为全部"
      }
      postCreateJob(this.params).then(() => {
        this.$message.success('创建成功')
      })
      this.init()
      this.changePageIndex(1)
    },
    myDel(item) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteJob(item).then(() => {
          this.$message.success('删除成功')
          this.init()
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    myCopyPre(item) {
      getJob(item).then(res => {
        this.params = {}
        let companyId = this.$route.query.id
        this.$set(this.params, 'jobName', res.data.jobName)
        this.$set(this.params, 'salary', res.data.salary)
        this.$set(this.params, 'degree', res.data.degree)
        this.$set(this.params, 'message', res.data.message)
        this.$set(this.params, 'jobTypeId', res.data.jobTypeId)
        this.$set(this.params, 'companyId', companyId)
        this.$set(this.params, 'label', res.data.label)
        this.$set(this.params, 'city', res.data.city)
        this.$set(this.params, 'address', res.data.address)
        getCompanyJobsLabel(this.$route.query.id).then(res => {
          this.tags = []
          res.data.list.forEach(it => {
            if (it !== '') {
              this.tags.push({'value': it})
            }
          })
        })
        this.changePageIndex(4)
      })
    },
    myUpdatePre(item) {
      getJob(item).then(res => {
        this.params = {}
        this.$set(this.params, 'jobName', res.data.jobName)
        this.$set(this.params, 'salary', res.data.salary)
        this.$set(this.params, 'degree', res.data.degree)
        this.$set(this.params, 'message', res.data.message)
        this.$set(this.params, 'jobTypeId', res.data.jobTypeId)
        this.$set(this.params, 'label', res.data.label)
        this.$set(this.params, 'city', res.data.city)
        this.$set(this.params, 'address', res.data.address)
        this.$set(this.params, 'jobId', item)
        getCompanyJobsLabel(this.$route.query.id).then(res => {
          this.tags = []
          res.data.list.forEach(it => {
            if (it !== '') {
              this.tags.push({'value': it})
            }
          })
        })
        this.changePageIndex(3)
      })
    },
    myUpdate() {
      if (this.params.jobName === '' || this.params.jobName === null || this.params.jobName === undefined) {
        this.$message.warning('请输入工作名称')
        throw "error -> 请输入账号"
      }
      if (this.params.salary === '' || this.params.salary === null || this.params.salary === undefined) {
        this.$message.warning('请输入薪资待遇')
        throw "error -> 请输入薪资待遇"
      }
      if (this.params.jobTypeId === '' || this.params.jobTypeId === null || this.params.jobTypeId === undefined) {
        this.$message.warning('请输入工作类型')
        throw "error -> 请输入工作类型"
      }
      if (this.params.label === '全部') {
        this.$message.warning('工作标签不能为全部')
        throw "error -> 工作标签不能为全部"
      }

      putUpdateJob(this.params).then(() => {
        this.$message.success('修改成功')
      })
      this.init()
      this.changePageIndex(1)
    },
    myLabel(item) {
      if (item === '全部') {
        this.queryParam.label = null
      } else {
        this.queryParam.label = item
      }
      this.myList()
    },
    init() {
      getCompanyJobsLabel(this.$route.query.id).then(res => {
        this.tags = []
        this.tags.push({name: '全部', type: ''})
        res.data.list.forEach(it => {
          if (it !== '') {
            this.tags.push({name: it, type: ''})
          }
        })
      })
      getJobTypes().then(res => {
        this.jobTypes = res.data.jobTypes
      })
      this.myList()
    },
  },
  mounted() {
    window.app = this;
  },
  created() {
    this.companyName = this.$route.query.companyName
    this.queryParam.companyId = this.$route.query.id
    this.init()
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-form-css .el-input, .el-select {
  width: 300px;
}
</style>